<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>示例（echarts菜单）</title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/assets/plugins/echarts/echarts-all.js"></script>
</head>
<body>
	<a href="../demo.jsp">返回</a>
	<div id="main" style="height:400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
		
		//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
		title : {
	        text: '未来一周气温变化', //主标题文本，'\n'指定换行
	        subtext: '纯属虚构' //副标题文本，'\n'指定换行
	    },
	    //提示框，鼠标悬浮交互时的信息提示
	    tooltip : {
	        trigger: 'axis' //触发类型，默认数据触发，可选为：'item' | 'axis'
	    },
	    //图例，每个图表最多仅有一个图例
	    legend: {
	        data:['最高气温','最低气温'] //图例内容数组，数组项通常为{string}，每一项代表一个系列的name
	    },
	    //工具箱，每个图表最多仅有一个工具箱
	    toolbox: {
	        show : true, //显示策略，可选为：true（显示） | false（隐藏）
	        //启用功能
	        feature : {
	        	//辅助线标志，icon左数1/2/3，分别是启用，删除上一条，删除全部
	            mark : {
	            	show: true //
	            	}, 
	            //数据视图，上图icon左数6，打开数据视图，可设置更多属性
	            dataView : {
	            	show: true, 
	            	readOnly: false //默认数据视图为只读，可指定readOnly为false打开编辑功能
	            	}, 
	            //动态类型切换
	            magicType : {
	            	show: true, 
	            	//动态类型切换
	            	type: ['line', 'bar']
	            	},
	            //还原，复位原始图表
	            restore : {show: true},
	            //保存图片
	            saveAsImage : {show: true}
	        }
	    },
	    //是否启用拖拽重计算特性，默认关闭
	    calculable : true,
	    //直角坐标系中横轴数组
	    xAxis : [
	        {
	            type : 'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
	            boundaryGap : false, //类目起始和结束两端空白策略，默认为true留空，false则顶头
	            data : ['周一','周二','周三','周四','周五','周六','周日'] //类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
	        }
	    ],
	    //直角坐标系中纵轴数组
	    yAxis : [
	        {
	            type : 'value',
	            //坐标轴文本标签
	            axisLabel : {
	                formatter: '{value} °C' //间隔名称格式器
	            }
	        }
	    ],
	    //驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效
	    series : [
	        {
	            name:'最高气温', //系列名称，如启用legend，该值将被legend.data索引相关
	            type:'line', //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示
	            data:[11, 11, 15, 13, 12, 13, 10], // 系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
	            //系列中的数据标注内容
	            markPoint : {
	                data : [
	                    {type : 'max', name: '最大值'}, // 最大值
	                    {type : 'min', name: '最小值'}	  // 最小值
	                ]
	            },
	            //系列中的数据标线内容
	            markLine : {
	                data : [
	                    {type : 'average', name: '平均值'} //平均值水平线或垂直线
	                ]
	            }
	        },
	        {
	            name:'最低气温',
	            type:'line',
	            data:[1, -2, 2, 5, 3, 2, 0],
	            markPoint : {
	                data : [
	                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
	                ]
	            },
	            markLine : {
	                data : [
	                    {type : 'average', name : '平均值'}
	                ]
	            }
	        }
	    ]
}
myChart.setOption(option);
	/* $(document).ready(function() {
		
	}); */
</script>
</html>